<!-- item布局 -->
<template>
  <el-col v-if="isInline" v-show="!itemData.hidden" :xs="itemData.xs || xs" :sm="itemData.sm || sm"
    :md="itemData.md || md" :lg="itemData.lg || lg" :xl="itemData.xl || xl" :span="itemData.span || span">
    <slot />
  </el-col>
  <div v-else v-show="!itemData.hidden" :class="{ 'inline': inline }">
    <slot />
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  // 默认栅格式布局 xs = 24 sm = 12 md=12 lg=8 xl=6
  isGrid: { type: Boolean, default: true },
  // 全局控制item的span， 默认8，只有isGrid为false才能用
  itemSpan: { type: Number, default: 8 },
  // item 数据
  itemData: { type: Object, default: () => { } },
  // 是否是内联模式，非内联模式则会按照element的原型form一样，竖行排列,剔除掉栅格布局，isGrid将不起作用
  isInline: { type: Boolean, default: true },
  // element-ui的内联模式，只有isInline为false的时候才会起作用
  inline: { type: Boolean, default: false }
})

// 只计算某一个变动，节省开销
const xs = computed(() => {
  if (props.isGrid) return 24
  return {}
})
const sm = computed(() => {
  if (props.isGrid) return 12
  return {}
})
const md = computed(() => {
  if (props.isGrid) return 8
  return {}
})
const lg = computed(() => {
  if (props.isGrid) return 8
  return {}
})
const xl = computed(() => {
  if (props.isGrid) return 6
  return {}
})
const span = computed(() => {
  if (props.isGrid) return null
  return props.itemSpan
})
</script>
